<script setup>
//变量的导入
import { ref ,reactive} from 'vue';
//axios的传入
import request  from "../axios/axios"
//路由的跳转工具
import {useRouter ,RouterLink} from "vue-router"
//跳转路由


//用户变量
let uName=ref("");//用户名变量
let uPassword=ref("")//用户密码变量
let uSex=ref("")//用户性别变量
let uXh=ref("")//用户学号变量
let uPhone=ref("")//用户手机号变量
let uRePassword=ref("")
//提示变量
let nameShow=ref("")//用户名提示变量
let namePassword=ref("")//用户密码提示变量
let nameSex=ref("")//用户性别提示变量
let nameXh=ref("")//用户学号提示变量
let namePhone=ref("")//用户手机号提示变量
let nameRePassword=ref("")
//axios 请求变量


//重填表单
function resetAll(){
    nameShow.value="";
    namePassword.value="";
    nameSex.value="";
    nameXh.value="";
    namePhone.value="";
}
//检查用户名
async function checkUserName(){
    //定义正则表达式
    var userNameReg=/^[1-9a-zA-Z]{1}[0-9a-zA-Z]{4,15}$/;
    if(userNameReg.test(uName.value)){
        nameShow.value="OK";
        //使用axios向后端发送请求看看有没有被占用
       let {data}=await request.get("/checkUsername",{
            params:{
                username:uName.value
            }
        })

        if(data.statusCode==201){
            //如果状态码为成功则可用
            nameShow.value=data.message;
            return true;
        }else{
            nameShow.value=data.message;
            return false;
        }
        
    }else{
        nameShow.value="用户名格式不正确";
        return false;
    }
}
//检查用户密码格式
function checkUserPwd(){
    var userNamePwdReg=/^[1-9a-zA-Z]{1}[0-9a-zA-Z]{5,15}$/;
    if(userNamePwdReg.test(uPassword.value)){
        namePassword.value="OK";
        return true;
    }else{
        namePassword.value="密码格式不正确";
        return false;
    }
}
//检查重复密码
function checkReUserPwd(){
    if(uPassword.value==uRePassword.value){
        nameRePassword.value="OK";
        return true;
    }else{
        nameRePassword.value="两次密码不一致";
        return false;
    }
}


//检查用户性别
function checkUserSex(){
    if(uSex.value=="男" || uSex.value=="女"){
        nameSex.value="OK";
        return true;
    }else{
        nameSex.value="男 OR 女";
        return false;
    }
}

//检查学号格式
function checkUserXh(){
    //定义学号2202220429
    var userXhReg=/^[1-9][0-9]{9}$/;
    if(userXhReg.test(uXh.value)){
        nameXh.value="OK";
        return true;
    }else{
        nameXh.value="学号为10十位数字,首位不为0";
        return false;
    }
}


//检查手机号格式
function checkUserPhone(){
    var userPhoneReg=/^[1]{1}[0-9]{10}$/;
    if(userPhoneReg.test(uPhone.value)){
        namePhone.value="OK";
        return true;
    }else{
        namePhone.value="手机格式有误";
        return false;
    }
}
//检查登录
function checkLogin(){
    if(checkUserName() && checkUserPwd() && checkUserSex() && checkUserXh() && checkUserPhone() && checkReUserPwd()){
        
        console.log("注册成功")
        return true;
    }else{
        return false;
    }
}
//发送axios请求
async function sendRegist(){
    if(checkLogin()){

        //发送get请求
        var {data} = await request.get(//使用解构表达式获取data对象
            "/regist",
            {
                params:{
                    username:uName.value,
                    userPassword:uPassword.value,
                    userSex:uSex.value,
                    userXh:uXh.value,
                    userPhone:uPhone.value
                }
            }

        )
        console.log(data);
    }
    
   


}



</script>

<template>
    <div class="regb">
        <div id="login_b">

            <div id="title"><br> <h2>用户注册</h2></div>  <!--  登录界面-->
            <div id="content"> 
                <br>
                <br>
                <div class="inputUI">
                    用 户 名 : <input  type="text"   name="username"   class="inp"  @blur="checkUserName()"   v-model="uName">
                            <span class="hint" id="hint_user" v-text="nameShow"></span>
                </div>
                <div class="inputUI">
                    用户密码: <input  type="password"  name="userpassword"  class="inp" @blur="checkUserPwd()"  v-model="uPassword" />
                            <span  class="hint"   v-text="namePassword"></span>
                </div>
                <div class="inputUI">
                    重复密码: <input  type="password"  name="userRepassword"  class="inp" @blur="checkReUserPwd()"  v-model="uRePassword" />
                            <span  class="hint"   v-text="nameRePassword"></span>
                </div>
                <div class="inputUI">
                    用户性别 : <input  type="text"   name="user_sex"   class="inp"  @blur="checkUserSex()"   v-model="uSex">
                            <span class="hint" id="hint_user" v-text="nameSex"></span>
                </div>
                <div class="inputUI">
                    用户学号: <input  type="text"   name="user_xh"   class="inp"   @blur="checkUserXh()"  v-model="uXh">
                            <span class="hint" id="hint_user" v-text="nameXh"></span>
                </div>
                <div class="inputUI">
                    用户电话: <input  type="text"   name="user_phone"   class="inp"  @blur="checkUserPhone()"   v-model="uPhone">
                            <span class="hint" id="hint_user" v-text="namePhone"></span>
                </div>
                <br>
                <br>
                <br>
            </div> 

            <div class="btnContent">
                    <button  class="btnStyle" @click="sendRegist()">注册</button><br>
                    <button  class="btnStyle" @click="resetAll()">重置</button><br>
                    <button  class="btnStyle"><RouterLink to="login" style="text-decoration: none; color: black;">去登录</RouterLink> </button>
            </div>
            </div>

    </div>
        
</template>

<style scoped>
@import "../public/css/regist_css.css";
.regb{
    width: 100%;
    height: 100%;
    background-image: url(../public/img/regbg.jpg);
    background-size: 100%;
}
</style>
